<template>
	<view>
		<view class="goBack">
			<text class="gobackText" @click="goBack">
				<uni-icons type="left" size="18" color="#3E89FA"></uni-icons>
				返回 </text>
		</view>
		<view class="findall">
			<view class="feed" v-for="(item, index) in based" :key="index" @click="detail(item.id)">
				<view class="find">
					<view class="name">
						<image class="namepic" :src="item.picUrl" mode=""></image>
						<view class="info">
							<view class="text">
								{{item.name}}
							</view>
							<view class="line">
							</view>
							<view class="pire">
								{{item.floorPrice}}
							</view>
						</view>
					</view>
				</view>
				<view class="desc">
					{{item.desc}}
				</view>
			</view>
			<!-- 没用更多了 -->
			<view class="feed">
				<view class="van-list__finished-text">
					没有更多了
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	// 引入封装的请求方法
	import {
		get
	} from '@/lib/http.js';
	export default {
		data() {
			return {
				based: [],
				page: 1,
				limit: 10,
				isLoading: false // 加载状态
			}
		},
		onLoad() {
			// 页面加载时获取轮播数据
			this.fetchSwiperList();
		},
		onPageScroll(e) {
			const {
				scrollHeight,
				scrollTop,
				windowHeight
			} = e;
			// 判断是否滚动到底部附近
			if (scrollTop + windowHeight >= scrollHeight - 100 && !this.isLoading) {
				this.isLoading = true;
				this.page++;
				this.fetchSwiperListtwo()
					.finally(() => {
						this.isLoading = false;
					});
			}
		},
		methods: {
			detail(id) {
				console.log(id)
				uni.navigateTo({
					url: `/pages/branda/branda?id=${id}`
				})
			},
			goBack() {
				uni.navigateBack({
					// 返回层级  如果层级没有那么多就直接跳到首页
					delta: 1
				});
			},
			fetchSwiperList() {
				// 使用 get 方法发起请求
				get(`/wx/brand/list?page=${this.page}&limit=${this.limit}`)
					.then((response) => {
						const data = response.data;
						// 检查返回的数据中是否存在 data 和 list 字段
						if (data && data.data && data.data.list) {
							// 更新轮播列表数据
							this.based = data.data.list;
							console.log(this.based, '第一页数据');
						} else {
							console.error('返回的数据格式错误');
							uni.showToast({
								title: '数据格式错误',
								icon: 'none'
							});
						}
					})
					.catch((error) => {
						console.error('请求出错', error);
						uni.showToast({
							title: '请求出错',
							icon: 'none'
						});
					});
			},
			fetchSwiperListtwo() {
				return new Promise((resolve, reject) => {
					get(`/wx/brand/list?page=${this.page}&limit=${this.limit}`)
						.then((response) => {
							const data = response.data;
							if (data && data.data && data.data.list) {
								this.based = this.based.concat(data.data.list);
								resolve();
							} else {
								console.error('返回的数据格式错误');
								uni.showToast({
									title: '数据格式错误',
									icon: 'none'
								});
								reject();
							}
						})
						.catch((error) => {
							console.error('请求出错', error);
							uni.showToast({
								title: '请求出错',
								icon: 'none'
							});
							reject();
						});
				});
			},
			fetchSwiperListtherr() {
				// 使用 get 方法发起请求
				get('/wx/brand/list?page=3&limit=10')
					.then((response) => {
						const data = response.data;
						// 检查返回的数据中是否存在 data 和 list 字段
						if (data && data.data && data.data.list) {
							this.based = this.based.concat(data.data.list);
							this.fetchSwiperListfount()
						} else {
							console.error('返回的数据格式错误');
							uni.showToast({
								title: '数据格式错误',
								icon: 'none'
							});
						}
					})
			},
			fetchSwiperListfount() {
				// 使用 get 方法发起请求
				get('/wx/brand/list?page=4&limit=10')
					.then((response) => {
						const data = response.data;
						// 检查返回的数据中是否存在 data 和 list 字段
						if (data && data.data && data.data.list) {
							this.based = this.based.concat(data.data.list);
							this.fetchSwiperListfive()
						} else {
							console.error('返回的数据格式错误');
							uni.showToast({
								title: '数据格式错误',
								icon: 'none'
							});
						}
					})
			},
			fetchSwiperListfive() {
				// 使用 get 方法发起请求
				get('/wx/brand/list?page=5&limit=10')
					.then((response) => {
						const data = response.data;
						// 检查返回的数据中是否存在 data 和 list 字段
						if (data && data.data && data.data.list) {
							this.based = this.based.concat(data.data.list);
						} else {
							console.error('返回的数据格式错误');
							uni.showToast({
								title: '数据格式错误',
								icon: 'none'
							});
						}
					})
			},

		}
	}
</script>

<style>
	.gobackText {
		color: #3E89FA;
		font-size: 15px;
		display: block;
		padding: 13px;
	}
	
	.name {
		width: 100%;
		height: 180px;
		position: relative;
	}
	
	.line {
		margin: 0 auto;
		margin-top: 16px;
		display: block;
		height: 2px;
		width: 300px;
		background: #fff;
	}
	
	.text {
		margin-top: 60px;
		height: 25px;
		font-size: 25px;
		color: #fff;
	}
	
	.pire {
		height: 25px;
		font-size: 25px;
		color: #fff;
	}
	
	.desc {
		background: #fff;
		width: 100%;
		height: auto;
		overflow: hidden;
		padding: 25px 20px;
		font-size: 20px;
		color: #666;
		line-height: 20px;
		text-align: center;
	}
	
	.namepic {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 180px;
	}
	
	.findall {
		background-color: #f2f2f2;
		height: 100vh;
		overflow-y: auto;
		padding-bottom: 50px;
		box-sizing: border-box;
	}
	
	.info {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 180px;
		text-align: center;
		display: block;
	}
	/* 没用更多了 */
	.van-list__finished-text {
		color: #969799;
		font-size: 14px;
		line-height: 50px;
		text-align: center;
	}
	/*  */
</style>